<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-07-26 14:46:53
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-07-26 15:57:46
-->
<template>
  <div class="Raw">
    <h3 class="title">toRaw与markRaw</h3><hr><br>
    <h3>state: <br>{{state}}</h3>
    <h4>logreactive(state): <br>{{logReactive}}</h4>
    <!-- <h4>ToRaw(state): <br>{{logToRaw}}</h4> -->
    <!-- <h4>markRaw(state): <br>{{logMarkRaw}}</h4> -->
    <hr>
    <button @click="testToRaw">testToRaw</button><br><br>
    <h4>ToRaw(state): {{logToRaw}}</h4>
    <hr>
    <button @click="testMarkRaw">testMarkRaw</button><br><br>
     <h4>markRaw(state): <br>{{logMarkRaw}}</h4>
  </div>
</template>

<script lang="ts">
import { defineComponent, markRaw, reactive, toRaw } from 'vue'
interface userInfo {
  name: string,
  age: number,
  likes?: string[]
}
export default defineComponent ({
  name: 'toRawAndMarkRaw',
  setup(){
    let state2;
    let state3;

    const state = reactive<userInfo>({
      name: 'Jack',
      age: 18
    })
    console.log(state);
    let logReactive = 'Proxy {name: "Jack", age: 18}'
    let logToRaw = '{name: "Jack", age: 18}'
    let logMarkRaw = 'Proxy {name: "Jack", age: 18, __v_skip: true}'

    const testToRaw = () => {
      // 把代理对象变成了普通对象，数据变化，界面不变化
      state2 = toRaw(state)
      console.log(state2);
      state2.name += '====='
    }
    const testMarkRaw = () => {
      state3= markRaw(state)
      console.log(state3);
      const likes = ['吃', '喝']
      state.likes = markRaw(likes)
      state3.name += '====='
    }
    
    return {
      state,
      logReactive,
      state2,
      logToRaw,
      state3,
      logMarkRaw,
      testToRaw,
      testMarkRaw
    }
  }
})
</script>

<style>
  .Raw {
    padding: 16px;
  }
</style>